<template>
    <div>
        <span class="demonstration" style="margin-right: 24px">类目选择</span>
        <el-cascader
                :options="options"
                @change="handleChange" @active-item-change="handleActiveChange"
                :disabled="this.options.length==0" filterable
                change-on-select
                placeholder="试试搜索：数码" style="width: 300px;">
        </el-cascader>
    </div>
</template>

<script>
    import { getCategoryTree} from '@/api/category'
    import {showMessage} from '@/utils/message';
    export default {
        props: {
            id: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                options: []
            }
        },
        mounted() {
            setTimeout(this.getCate(), 20)
        }
        ,
        methods: {
            getCate() {
                /* //        一开始要渲染的第一级
                 getFirCategory().then((resp) => {
                     //          console.log(resp)
                     var opts = resp.data.list;
                     for (let item of opts) {
 //                  console.log(item);
                         let category = {}
                         category.value = item.id;
                         category.label = item.name;
                         category.children = []
                         this.options.push(category)
                     }
 //                console.log(this.options)
                 }).catch((err) => {
                     console.log(err)
                 })*/
//               直接获取整个级联列表
                getCategoryTree()
                    .then((resp) => {
//                        console.log(resp);
                        for (let firCate of resp.data) {
                            let fircate = {
                                value: firCate.id,
                                label: firCate.name,
                                children: firCate.typeList.length == 0 ? null : []
                            };
                            this.options.push(fircate);
                            if (firCate.typeList.length == 0) {
                                continue
                            } else {
                                for (let secCate of firCate.typeList) {
                                    let seccate = {
                                        value: secCate.id,
                                        label: secCate.name,
                                        children: secCate.beanList.length == 0 ? null : []
                                    };
                                    fircate.children.push(seccate);
                                    if (secCate.beanList.length == 0) {
                                        continue
                                    } else {
                                        for (let thiCate of secCate.beanList) {
                                            let thicate = {
                                                value: thiCate.id,
                                                label: thiCate.name,
                                                children: thiCate.modelList.length == 0 ? null : []
                                            };
                                            seccate.children.push(thicate)
                                            if (thiCate.modelList.length == 0) {
                                                continue
                                            } else {
                                                for (let forCate of thiCate.modelList) {
                                                    let forcate = {
                                                        value: forCate.id,
                                                        label: forCate.name
//                                            children: []
                                                    };
                                                    thicate.children.push(forcate)
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    })
                    .catch((err) => {
                        console.log(err)
                    })

            },
            handleChange(value) {
                // console.log(value);
                let sendData = {};
                if (value.length == 4) {
                    sendData = {
                        categoryId: value[0],
                        typeId: value[1],
                        brandId: value[2],
                        modelId: value[3]
                    };
                }

                if (this.id == 0) {
                    this.$emit("get-params", sendData)
                } else {

                    this.$emit("get-params1-n", sendData)
                }

            },
            handleActiveChange(arr) {
            }
        }
    }
</script>

<style lang="less">

</style>
